<template>
  <div>
    <el-dialog
      title="設備詳情"
      :visible.sync="isOpen"
      :modal-append-to-body="false"
      @close="onSave(false)"
      width="50%">
      <el-divider content-position="left">設備信息</el-divider>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-input placeholder="請輸入設備IMEI" v-model="changeAssets.facilityNum" disabled>
              <template slot="prepend">設備IMEI：</template>
            </el-input>
        </el-col>
        <el-col :span="12">
          <el-input placeholder="請輸入設備類型" v-model="assetsType" disabled>
              <template slot="prepend">設備類型：</template>
            </el-input>
        </el-col>
        <el-col :span="12">
          <el-input placeholder="請輸入設備名稱" v-model="changeAssets.facilityName" disabled>
              <template slot="prepend">設備名稱：</template>
            </el-input>
        </el-col>
        <el-col :span="12">
          <el-input placeholder="請輸入激活時間" v-model="changeAssets.createTime" disabled>
              <template slot="prepend">激活時間：</template>
            </el-input>
        </el-col>
       <!-- <el-col :span="12">
          <el-input placeholder="請輸入使用範圍" v-model="input">
              <template slot="prepend">使用範圍：</template>
            </el-input>
        </el-col> -->
        <!-- <el-col :span="24">
          <el-input placeholder="請輸入備註" type="textarea" :rows="2" v-model="input"></el-input>
        </el-col> -->
      </el-row>
      <el-divider content-position="left">SIM卡信息</el-divider>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-input placeholder="" v-model="input" disabled>
              <template slot="prepend">設備SIM卡號：</template>
            </el-input>
        </el-col>
        <el-col :span="12">
          <el-input placeholder="" v-model="input" disabled>
              <template slot="prepend">ICCID：</template>
            </el-input>
        </el-col>
        <el-col :span="12">
          <el-input placeholder="" v-model="input" disabled>
              <template slot="prepend">IMSI：</template>
            </el-input>
        </el-col>
        <el-col :span="12">
          <el-input placeholder="" v-model="input" disabled>
              <template slot="prepend">卡狀態：</template>
            </el-input>
        </el-col>
        <el-col :span="12">
          <el-input placeholder="" v-model="input" disabled>
              <template slot="prepend">卡到期時間：</template>
            </el-input>
        </el-col>
        <el-col :span="12">
          <el-input placeholder="" v-model="input" disabled>
              <template slot="prepend">卡激活時間：</template>
            </el-input>
        </el-col>
      </el-row>
      <!-- <el-divider content-position="left">油箱信息</el-divider> -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSave(true)">保 存</el-button>
        <el-button @click="onSave()">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'assets-details',

  model: {
    props: "value",
    event: "update",
  },

  props: {
    value: {
      default() {
        return false
      },
    },
  },

  data() {
    return {
      input: '',
      assetsType: 'JM-V340'
    }
  },

  computed: {
    ...mapState({
      changeAssets: (state) => state.map.changeAssets,
    }),

    isOpen: {
      get:function() {
        return this.value
      },
      set:function() {
        this.$emit('update', false)
      }
    }
  },

  methods: {
    onSave(flag) {
      if(flag) {
        console.log('这是保存')
      }
      this.$emit('update', false)
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/css/them.scss";
/deep/ .el-dialog {
  left: 25%;
  bottom: auto;
}

/deep/ .el-dialog__header {
  border-bottom: 1px solid #e5e5e5;
}

/deep/ .el-input-group__prepend {
  border: 0;
  background-color: transparent;
}

.el-input {
  margin-bottom: 10px;
}

/deep/ .el-input-group__prepend {
  width: 115px;
}
</style>
